<template>
	<div class="LengMessage">
		
		<el-dropdown v-if="maslength<=400"  trigger="click" size="mini" @command="handleCommand">
			<div class="fromMessagePadding  userSelect  ">{{message}}</div>
			<el-dropdown-menu slot="dropdown">
				<el-dropdown-item
					:command="beforeHandleCommand('copy',message)">复制</el-dropdown-item>
			</el-dropdown-menu>
		</el-dropdown>
		
		<div v-else class="messageBox">{{showFirstNLines(message)}}...<i class="color-main cursorPointer"
				@click="handledMsg">更多信息</i></div>
		<div class="">
			<el-dialog :modal="false" :appendToBody="true" title="信息详情" :visible.sync="dialogVisible" fullscreen
				@close='handleCancle'>
				<el-dropdown trigger="click" size="mini" @command="handleCommand">
					<div class="messageItem">{{message}}</div>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item key="copymsg"
							:command="beforeHandleCommand('copy',message)">复制</el-dropdown-item>
						<el-dropdown-item key="gobackmsg"
							:command="beforeHandleCommand('goback','-1')">返回</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
				<span slot="footer" class="dialog-footer">
					<el-button type="primary" @click="$handledMsgCopy(message)">复 制</el-button>
					<el-button  @click="dialogVisible=false">返 回</el-button>
				</span>
			</el-dialog>
		</div>
	</div>
</template>

<script>
	export default {
		name: "LengMessage",
		props: {
			message: {
				type: String,
				default: ""
			},
			maslength:{
				type: String | Number,
				default: ""
			},
		},
		data() {
			return {
				dialogVisible: false
			}
		},
		methods: {
			showFirstNLines(str, n = 3) {
				const lines = str.split('\n');
				return lines.slice(0, n).join('\n');
			},
			handleCancle() {
				this.dialogVisible = false

			},
			handledMsg() {
				this.dialogVisible = true

			},
			//消息文本操作
			beforeHandleCommand(type, value) {
				return {
					type,
					value
				}
			},
			handleCommand(key) {
				if (key.type == "goback") {
					this.handleCancle()
				} else if (key.type === 'copy') {
					this.$handledMsgCopy(key.value)
				}

			},
		}
	}
</script>

<style scoped>
	.LengMessage {
		position: relative;
	}

	.messageBox {
		font-size: 14px;
		color: #606266;
		text-align: left;
	}

	.messageItem {
		width: 98%;
		white-space: pre-wrap;
		overflow-wrap: break-word;
		padding: 6px 3px;
		text-align: left;
	}
	
	
	.fromMessagePadding {
		padding: 3px 8px;
		box-sizing: border-box;
	}
</style>